<template>
  <div class="notice">
    <el-dropdown>
      <el-button class="inform" type="split-button">
        <!-- <img @click="go_inform" src="./../../assets/img/inform.png" alt /> -->
        <i
          @click="go_inform"
          class="el-icon-chat-line-round"
          style="font-size: 21px; color: #ffffff"
        ></i>
        <div v-if="read > 0" class="read_num">{{ read }}</div>
      </el-button>
      <el-dropdown-menu slot="dropdown" class="inform_center">
        <div class="inform_top">
          <div>
            通知 <span v-if="read > 0">(未读{{ read }}条)</span>
          </div>
          <span @click="all_read">全部已读</span>
        </div>
        <div class="inform_content">
          <div
            class="inform_item"
            v-for="(item, index) in reads"
            :key="index"
            v-show="index < 3"
          >
            <div class="item_top">
              <i class="el-icon-message-solid"></i>
              <span> {{ item.title }}</span>
              <span>{{ item.created_time | getTimeFormat }}</span>
            </div>
            <div class="item_content">
              {{ item.content }}
            </div>
          </div>
          <!-- <div class="inform_more" v-show="index >= 3">
            ……查看更多通知
          </div> -->
        </div>
        <div class="inform_bottom" @click="go_inform">前往通知中心</div>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "notice",
  data() {
    return {
      // 鼠标进入变色
      currentIdx: null,
      currentCheckIdx: null,
      tableDate: [],
      // 未读列表的旧ID
      former_id: 0,
      timer: null,
      count: 0,
      // 未读
      read: "",
      reads: "",
    };
  },
  components: {},
  created() {
    clearInterval(this.timer);
    this.timer = null;
    this.timing();
    this.read_num();
    this.read_lists();
  },
  mounted() {},
  destroyed() {
    // 每次离开当前界面时，清除定时器
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    load() {
      this.count += 2;
    },
    // 全部已读
    read_all() {
      var params = {};
      this.$api.getNewss.read_all(params).then((res) => {
        if (res.data.code == 200) {
          this.read_lists();
          this.read_num();
        }
      });
    },
    all_read() {
      this.read_all();
    },
    go_inform() {
      this.$router.push({
        path: "/index/news/newss",
      });
    },
    timing() {
      if (this.timer == null) {
        this.timer = setInterval(() => {
          this.read_lists();
          this.read_num();
        }, 60000);
      }
    },
    // 未读列表
    read_lists(page, page_size) {
      var params = {};
      page = this.page || 1;
      page_size = this.page_size || 10;
      var data = { page: page, page_size: page_size };
      data = data || {};
      params = data;
      this.$api.getNewss.read_lists(params).then((res) => {
        if (res.data.code == 200) {
          this.reads = res.data.result;
        }
      });
    },
    // 鼠标进入离开列表变色
    enter(idx) {
      this.currentIdx = idx;
    },
    leave() {
      this.currentIdx = null;
    },
    // 通知声音
    playAudio() {
      var audio = document.getElementById("meassage-audio");
      if (audio !== null) {
        if (audio.paused) {
          audio.play();
        } else {
          audio.pause();
        }
      }
    },
    read_num() {
      var params = {};
      this.$api.getNewss.read_num(params).then((res) => {
        if (res.data.code == 200) {
          this.read = res.data.result.num;
          if (this.former_id == 0 || this.former_id == "") {
            this.former_id = res.data.result.id;
          }
          if (res.data.result.id > this.former_id) {
            this.playAudio();
            this.former_id = res.data.result.id;
          }
        }
      });
    },
    read_links(id, links) {
      var params = {};
      params.id = id;
      this.$api.getNewss.read(params).then((res) => {
        if (res.data.code == 200) {
          this.read_lists();
          this.read_num();
          this.$router.push(links);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.notice {
  padding-right: 10px;
}
.inform {
  width: 60px;
  margin-top: 2px;
  background: none;
  border: none;
  position: relative;
  img {
    width: 25px;
  }
}
.read_num {
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
  background-color: #f56c6c;
  position: absolute;
  top: 0px;
  right: 0px;
}
.inform_center {
  width: 500px;
  // display: block !important;
  padding: 20px 20px;
  background-color: #fff;
  position: relative;
  .inform_top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    > div:nth-of-type(1) {
      font-size: 16px;
      color: #000;

      > span {
        font-size: 14px;
        color: #a9a9a9;
        letter-spacing: 1px;
      }
    }
    > span {
      font-size: 14px;
      padding: 2px 10px;
      color: #348df1;
      border-radius: 5px;
      border: 1px solid #348df1;
      cursor: pointer;
    }
  }
  .inform_bottom {
    width: 100%;
    height: 70px;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #3492f2;
    cursor: pointer;
  }
  .inform_content {
    width: 100%;
    padding-bottom: 70px;
    .inform_more {
      width: 100%;
      background-color: #fbfbfb;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      padding: 15px 0;
      color: #232323;
    }
    .inform_item {
      width: 100%;
      background-color: #fbfbfb;
      padding: 20px;
      color: #232323;
      margin-bottom: 10px;
      border-radius: 5px;
      cursor: pointer;
      .item_top {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        i {
          background-color: #2085f1;
          color: #fff;
          border-radius: 50%;
          font-size: 14px;
          padding: 2px;
          width: 20px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
        }
        font-size: 14px;
        > span:nth-of-type(1) {
          margin-right: auto;
        }
        > span:nth-of-type(2) {
          font-size: 14px;
          color: #a3a3a3;
        }
      }
      .item_content {
        font-size: 13px;
        color: #232323;
        line-height: 1.5;
        text-align: left;
        word-break: break-all;
      }
    }
  }
}
</style>
